<template>
    <div class="containers">
        <div class="header">
            <img @click="goHome" src="../assets/images/pic_img2/btn_home.png" alt="">
            <img @click="goReturn" src="../assets/images/pic_img2/btn_return.png" alt="" style="margin-left: 37px;">
        </div>
        <div class="centers">
            <div v-for="(item, index) in lists" class="centers-item" @click="goCarsWork(index + 1)">
                {{ item }}
            </div>
        </div>
        <div class="footers">Copyright © 2025 动车入库作业智能登销记系统</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            lists: [
                '检 1', '检 2', '检 3', '检 4', '检 5', '检 6', '检 7', '检 8'
            ],
        }
    },  
  
    methods: {
        goCarsWork(id) {
            this.$router.push(`/carsWork?id=${id}`)
        },
        goReturn() {
            this.$router.go(-1)
        },
        goHome() {
            this.$router.push("/login")
        }
    }
}
</script>
<style lang="scss" scoped>
.containers {
    width: 100%;
    height: 100%;
    background-image: url("../assets/images/pic_img2/track_bg.jpg");
    background-size: cover;
    position: relative;

    .header {
        position: absolute;
        left: 569px;
        top: 186px;
    }

    .centers {
        position: absolute;
        top: 369px;
        left: 56px;
        display: flex;
        flex-wrap: wrap;

        .centers-item {
            width: 476px;
            height: 210px;
            background-image: url("../assets/images/pic_img2/1.png");
            background-size: 100% 100%;
            margin-bottom: 84px;
            text-align: center;
            line-height: 210px;
            font-weight: bold;
            color: #fff;
            font-size: 50px;

            /* 为偶数项添加左边距 */
            &:nth-child(even) {
                margin-left: 35px;
            }
        }
    }
}
</style>